<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="user-info">
			<image @tap='toInfoTeacher' v-if="token" :src="avatar" mode="aspectFit"
				style="height: 150rpx;width: 150rpx;border-radius: 50%;">
			</image>
			<image v-else src="/static/logo.png" mode="aspectFit"
				style="height: 150rpx;width: 150rpx;border-radius: 50%;">
			</image>
			<view class="user-info-detail">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view>
						<text style="font-size: 40rpx;font-weight: bold;margin-right: 40rpx;"
							@tap='WXRegister'>{{token ? nickname : '登录'}}</text>
						<uni-icons @tap='toChangeNickname' type="compose" color="rgb(204,204,204)" size="20">
						</uni-icons>
					</view>
					<!-- <uni-icons type="sound-filled" size="24	" color="rgb(84,141,254)"></uni-icons> -->
				</view>
				<text v-if="token" style="color: rgb(189,189,189);">ID:{{userID}}</text>
				<view v-if="creater == 1" style="display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<text style="color: rgb(51,51,51);">{{authorInfo.fans || '0'}}</text>
						<text style="color: rgb(189,189,189);">粉丝</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;">
						<text style="color: rgb(51,51,51);">{{authorInfo.subscribes || '0'}}</text>
						<text style="color: rgb(189,189,189);">关注</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;">
						<text style="color: rgb(51,51,51);">{{authorInfo.likes || '0'}}</text>
						<text style="color: rgb(189,189,189);">喜欢</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能菜单 -->
		<view class="user-menus">
			<view class="user-menu-item" @tap="goapply" v-if="creater == 1">
				<view style="display: flex;align-items: center;">
					<image class="icon" src="/static/images/icon-images/icon0.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">邀请老师</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="toIncome(0)">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="videocam-filled" color="rgb(90,111,254)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon1.png" mode=""></image>
					<text
						style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">{{creater == 1 ? '收入记录' : '观看记录'}}</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="toIncome(1)" v-if="creater == 1">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="videocam-filled" color="rgb(90,111,254)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon5.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">观看记录</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="goUpload(0)">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="cart-filled" color="rgb(4,201,111)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon6.png" mode=""></image>
					<text
						style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">{{creater == 1 ? '视频发布' : '购课记录'}}</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="goUploadList(0)" v-if="creater == 1">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="cart-filled" color="rgb(4,201,111)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon7.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">发布记录</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="toIncome(2)" v-if="creater == 1">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="cart-filled" color="rgb(4,201,111)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon8.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">购课记录</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>

			<view class="user-menu-item" @tap="gofeed">
				<view style="display: flex;align-items: center;">
					<!-- <uni-icons type="chat-filled" color="rgb(54,170,157)" size="20"></uni-icons> -->
					<image class="icon" src="/static/images/icon-images/icon9.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">意见反馈</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
			<view class="user-menu-item" @tap="goapply" v-if="creater != 1">
				<view style="display: flex;align-items: center;">
					<image class="icon" src="/static/images/icon-images/icon0.png" mode=""></image>
					<text style="color: rgb(87,87,87);font-size: 40rpx;padding-left: 20rpx;">老师入驻</text>
				</view>
				<uni-icons type="arrowright" size="20" color="rgb(189,189,189)"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTeacher: false,
				registerQuery: {
					signature: '',
					encryptedData: '',
					rawData: '',
					iv: '',
					code: '',
				},
				nickname: '',
				avatar: '',
				userID: '',
				token: '',
				creater: '', // 0用户 9申请中 1作者
				authorInfo: {}
			}
		},
		onShow() {
			this.creater = uni.getStorageSync('creater') || ''
			this.token = uni.getStorageSync('acess_token') ? uni.getStorageSync('acess_token') : ''
			if (this.token) {
				// 获取个人信息
				this.getMyProInfo()
				this.getAuthorInfo()
			}
		},
		onLoad() {

		},
		methods: {
			// 获取作者信息
			async getAuthorInfo() {
				const res = await this.$http.request('/api/v1/author/show', {
					id: uni.getStorageSync('userID')
				}, 'GET')
				if (res.code == 200) {
					this.authorInfo = res.data
				}
			},
			async getMyProInfo() {
				const res = await this.$http.request('/api/v1/member', {}, 'GET')
				if (res.code == 200) {
					this.nickname = res.data.nickname
					this.avatar = res.data.head_portrait
					this.userID = res.data.id
					this.creater = res.data.creater
					uni.setStorageSync('userID', res.data.id)
					uni.setStorageSync('creater', res.data.creater)
					// if (this.creater == 1) {
					// 	this.getAuthorInfo()
					// }
				}
			},
			// 微信小程序注册
			WXRegister() {
				if (this.token) return

				uni.login({
					provider: 'weixin',
					success:  result => {
						uni.showLoading({
							title: '登录中'
						})
						this.registerQuery.code = result.code
						uni.getUserInfo({
							desc: '获取个人信息',
							success: async infoRes => {
								console.log(infoRes)
								this.registerQuery.signature = infoRes.signature
								this.registerQuery.encryptedData = infoRes.encryptedData
								this.registerQuery.rawData = infoRes.rawData
								this.registerQuery.iv = infoRes.iv
								const res = await this.$http.request('/api/v1/mini-program/login',
									this.registerQuery)
								if (res.code == 200) {
									uni.$toast('登录成功', true)
									uni.setStorageSync('acess_token', res.data.access_token)
									this.token = res.data.access_token
									this.nickname = res.data.member.nickname
									this.avatar = res.data.member.head_portrait
									this.userID = res.data.member.id
									this.creater = res.data.member.creater

									uni.setStorageSync('userID', res.data.member.id)
									uni.setStorageSync('creater', res.data.member.creater)
									// uni.setStorageSync('avatar', res.data.member.head_portrait)
									this.getMyProInfo()
									this.getAuthorInfo()
									return
								}
								uni.$toast(res.message)
							},
							fail: err => {
								console.log(err)
							},
							complete: () => {
								uni.hideLoading()
							}
						})
					}
				})


			},
			// 跳转到发布视频
			goUpload(state) {
				if (this.creater == 1) {
					uni.navigateTo({
						url: '/pages/user/user-uoload-video'
					})
				} else {
					uni.navigateTo({
						url: 'user-income-list?title=' + '购课记录'
					})
				}
			},
			goUploadList() {
				if (!uni.getStorageSync('acess_token')) return this.$toast('请先登录')
				uni.navigateTo({
					url: '/pages/user/upload-list?id=' + this.userID
				})
			},
			gofeed() {
				uni.navigateTo({
					url: '/pages/feedback/feedback',
				});
			},
			goapply() {
				if (this.creater == 1) {
					uni.navigateTo({
						url: '/pages/user/invitation-teacher',
					});
					return
				}
				uni.navigateTo({
					url: '/pages/apply/apply',
				});
			},
			// 跳转收益记录页面
			toIncome(state) {
				if (state == 2) {
					uni.navigateTo({
						url: 'user-income-list?title=' + '购课记录'
					})
					return
				}
				if (state == 1) {
					uni.navigateTo({
						url: 'user-income-list?title=' + '观看记录'
					})
					return
				}
				uni.navigateTo({
					url: 'user-income-list?title=' + (this.creater == 1 ? '收入记录' : '观看记录')
				})
			},
			// 跳转老师个人信息
			toInfoTeacher() {
				const token = uni.getStorageSync('acess_token')
				if (token) {
					uni.navigateTo({
						url: '/pages/teacher/teacher?id=' + this.userID
					})
				}
			},
			toChangeNickname() {
				uni.navigateTo({
					url: '/pages/user/user-change-nickname'
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: rgb(239, 238, 246);
		min-height: 100vh;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
	}

	/* 个人信息 */
	.user-info {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.user-info-detail {
		width: 70%;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.user-menu-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 15rpx;

		.icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
